<template>
  <section>
    <h2>Canvas Star</h2>
    <canvas ref="cav"/>
  </section>
</template>

<script>
import {getRandomColor} from "@/utils/tools";

export default {
  name: "canvas-star",
  data() {
    return {}
  },
  mounted() {
    this.init()
  },
  methods: {
    init() {
      let cavDom = this.$refs.cav
      cavDom.width = window.innerWidth - 210
      cavDom.height = window.innerHeight - 120
      let ww = cavDom.width
      let wh = cavDom.height
      let mouse={x:0,y:0}
      let ctx = cavDom.getContext('2d')

      class Star {
        constructor(mouse) {
          this.x = mouse.x
          this.y = mouse.y
          this.r = Math.random()*3 + 0.5
          this.color = getRandomColor()
        }
        draw(){

          ctx.fillStyle = getRandomColor();
          ctx.strokeStyle = getRandomColor();
          ctx.lineWidth = 8;
          ctx.moveTo(this.x-8, this.y-8);
          ctx.lineTo(this.x, this.y);
          ctx.stroke();
          ctx.globalAlpha = 0.95;
          ctx.beginPath()

          ctx.arc(this.x,this.y,this.r,0,Math.PI*2)
          ctx.fillStyle = 'rgba(250,250,50,1)'
          ctx.fill()
          ctx.closePath()
        }

      }

      function render(){
        ctx.clearRect(0,0,ww,wh)
        let star = new Star(mouse)
        star.draw()
      }
      function onMouseMove(e){
        mouse.x = e.offsetX
        mouse.y = e.offsetY
        render()
      }
      cavDom.addEventListener('mousemove',onMouseMove)

    }
  }
}
</script>

<style lang="scss" scoped>
canvas {
  background-color: #000000;
  border-radius: 8px;
}
</style>
